<template>
  <div class="third_authority">
    <el-form class="third-form" inline ref="form" label-width="60px" @submit.prevent @keypress.enter="onSearchClick">
      <el-form-item>
        <Button label="新增角色" type="primary" @click="onAddClick" />
      </el-form-item>
      <el-form-item>
        <el-input class="third_input" v-model="authorityData.search.authorityName" placeholder="请输入角色名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <Button label="重置" @click="onResetClick" />
        <Button label="搜索" type="primary" @click="onSearchClick" />
      </el-form-item>
    </el-form>
    <div class="outerTable">
      <el-table ref="tableRef" :height="tableHeight" :data="authorityData.list" stripe v-loading="loading">
        <el-table-column fixed="left" type="index" label="#" width="50" />
        <el-table-column prop="authorityName" label="角色名称" />
        <el-table-column prop="accountNumber" label="账号数量" />
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <Link label="编辑" @click="onEditClick(scope.row)" />
            <Link label="删除" @click="onDeleteClick(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <Pager :page="authorityData.search.page" :pageSizes="authorityData.search.pageSizes" :total="authorityData.total" :limit="authorityData.search.limit" @current-change="onCurrentChange" @size-change="onSizeChange" />
    </div>
  </div>
  <Authority v-model:visible="authorVisble" @change="onChangeTree" :form="authorityData.form" />
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { calcTableHeight } from '@/assets/js/utils.js'
import api from '@/api'
import consts from '@/consts'
import Pager from '@/components/pager/index.vue'
import Authority from './components/authority.vue'
import Link from '@/components/button/link.vue'
import Button from '@/components/button/button.vue'

const { tableRef, tableHeight } = calcTableHeight()

const authorityData = reactive({
  total: 0,
  form: {},
  list: [],
  search: {
    page: 1,
    limit: consts.Limit,
    pageSizes: consts.PageSize,
    authorityName: ''
  }
})
const authorVisble = ref(false)
const loading = ref(false)

const deleteAuthority = async (supplierAuthorityId) => {
  let { err } = await api.post(`/medinstrument/third/authority/del/${supplierAuthorityId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    loadData()
  }
}

const save = async () => {
  let params = Object.assign({}, authorityData.form)
  let url = 'medinstrument/third/authority/add'
  if (authorityData.form.supplierAuthorityId) {
    url = `/medinstrument/third/authority/update/${params.supplierAuthorityId}`
  }
  let { err } = await api.post(url, params)
  if (err) {
    ElMessage.error(err)
  } else {
    loadData()
  }
}

const loadData = async () => {
  loading.value = true
  let { data, err } = await api.get(`/medinstrument/third/authority/list?authorityName=${authorityData.search.authorityName}&limit=${authorityData.search.limit}&page=${authorityData.search.page}`)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    authorityData.list = data.authorityList
    authorityData.total = data.count
  }
}

const onAddClick = () => {
  authorVisble.value = true
}

const onEditClick = (row) => {
  authorityData.form = Object.assign({}, row)
  authorVisble.value = true
}

const onDeleteClick = (row) => {
  ElMessageBox.confirm(`您确认要删除 ${row.authorityName} 吗(不可恢复)?`, '系统提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    showClose: false,
    closeOnClickModal: false,
    closeOnPressEscape: false
  })
    .then(() => {
      deleteAuthority(row.supplierAuthorityId)
    })
    .catch(() => {})
}

const onCurrentChange = (val) => {
  authorityData.search.page = val
  loadData()
}

const onSizeChange = (val) => {
  authorityData.search.limit = val
  loadData()
}

const onSearchClick = () => {
  authorityData.search.page = 1
  loadData()
}

const onResetClick = () => {
  authorityData.search.authorityName = ''
  loadData()
}

const onChangeTree = (val) => {
  authorityData.form = Object.assign({}, val)
  save()
}

onMounted(() => {
  loadData()
})
</script>
